<template>
  <div>
    <div class="button-container">
      <div class="button-text">{{ name }}</div>
      <div class="button-menu">
        <a-menu v-model="current" mode="horizontal" @click="ChangeSort">
          <a-menu-item key="gmt_create">
            最新
          </a-menu-item>
          <a-menu-item key="blog_goods">
            点赞最多
          </a-menu-item>
          <a-menu-item key="blog_comment">
            评论最多
          </a-menu-item>
          <a-menu-item key="blog_read">
            阅读最多
          </a-menu-item>
          <a-menu-item key="blog_collection">
            收藏最多
          </a-menu-item>
        </a-menu>
      </div>
    </div>

    <div class="blog-list-container">
      <a-card v-for="item in blogList" :key="item.blogId" :body-style="blogBodyStyle" class="blog-card">
        <div class="blog-main">
          <div v-if="item.blogImage" class="blog-image">
            <img :src="item.blogImage" class="blog-cover">
          </div>
          <router-link to="/info/1" class="blog-container">
            <div class="blog-title">{{item.blogTitle}}</div>
            <div class="blog-comment">{{item.blogRemark}}</div>
            <div class="blog-bottom">
              <div class="blog-type" >
                分类：<a-tag color="green">{{typeMap[item.blogType]}}</a-tag>
              </div>
              <div class="blog-meta">
                <div class="blog-time">{{item.gmtCreate}}</div>
                <div class="blog-other">
                  <a-icon type="eye" /> {{ item.blogRead }}
                  <a-icon type="heart" /> {{ item.blogCollection }}
                  <a-icon type="like" /> {{ item.blogGoods }}
                  <a-icon type="message" /> {{ item.blogComment }}
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </a-card>
    </div>

    <div class="blog-pagination">
      <a-pagination :show-total="blogTotal => `共 ${blogTotal} 条`" show-quick-jumper :default-current="page.currentPage" :total="blogTotal"  @change="pageChange" />
    </div>

  </div>
</template>

<script>
import blogApi from '@/api/blog'
import typeApi from '@/api/type'
export default {
  props: {
    name: {
      type: String,
      default: '博客'
    }
  },
  data() {
    return {
      typeMap:{},//类别map
      blogList:[],//博客详情列
      blogTotal:'',//总数
      page:{   //查询对象
        currentPage: 1,
        currentSize: 10,
        sortColumn: 'gmt_create',
        sortMethod: 'desc'
      },
      current: ['gmt_create'],
      blogBodyStyle: {
        padding: '18px'
      }
    }
  },
  methods: {
    ChangeSort(item, key, keyPath){

      if(this.page.sortColumn === item.key){
        if(this.page.sortMethod === "desc"){
          this.page.sortMethod = "asc"
        }else{
          this.page.sortMethod = "desc"
        }
      }else{
        this.page.sortMethod = "desc"
        this.page.sortColumn = item.key
      }
      // console.log("key:",key)
      // console.log("item:",item)
      // console,log("keyPath",keyPath)
      this.getByPage()
    },
    //map集合，用来使得type的值可以显示中文，最小化性能损耗
        getTypeToMap(){
          typeApi.getTypeMap().then(res=>{
            this.typeMap = res.data
          })
        },
    getByPage(){
      blogApi.getByPage(this.page).then(res=>{
        // console.log("获取到的",res.data)
        this.blogList = res.data.records
        this.blogTotal = res.data.total
      })
    },
    pageChange(pageNumber) {
      this.page.currentPage = pageNumber
      this.getByPage()
      console.log('Page: ', pageNumber)
    }
  },
  created(){
    this.getByPage()
    this.getTypeToMap()
  }
}
</script>

<style scoped>
.button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 5px;
  align-items: center;
  line-height: 70px;
}

.button-text {
  font-size: 20px;
}

.ant-menu-horizontal {
  border-bottom: none !important;
}

.ant-menu {
  background: none !important;
}

a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #3e4149;
}

.blog-container {
  width: 550px;
  min-height: 130px;
}

a:hover {
  color: #3e4149;
}

.blog-title {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}

.blog-comment {
  margin-bottom: 10px;
  font-size: 14px;
  color: #9c9ea8;
  line-height: 22px;
  max-height: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.blog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.blog-meta {
  font-size: 12px;
  color: #9c9ea8;
}

.blog-image {
  width: 230px;
  margin-right: 20px;
}

.blog-cover {
  width: 100%;
  border-radius: 5px;
}

.blog-card {
  margin-bottom: 15px;
  border-radius: 5px;
}
</style>
